<template>
    <transition name="fade" @after-leave="afterLeave" @after-enter="afterEnter">
        <div class="notification" :style="style" v-show="visible">
            <span class="content"> {{content}}</span>
            <a class="btn" @click="handleClose" @mouseenter="clearTime" @mouseleave="createTimer">{{btn}}</a>
        </div>
    </transition>

</template>

<script>
export default {
    name: 'notification',
    components: {},
    props: {
        content: {
            type: String,
            required: true
        },
        btn: {
            type: String,
            default: '关闭'
        }
    },
    data () {
        return {
            visible: true
        }
    },
    watch: {},
    computed: {
        style () {
            return ''
        }
    },
    methods: {
        handleClose (e) {
            e.preventDefault()
            this.$emit('close')
        },
        afterLeave () {
            // 动画离开之后，调用销毁，显示隐藏，关闭
            this.$emit('closed')
        },
        // 动画进入之后
        afterEnter () { },
        createTimer () { },
        clearTime () { }
    },
    created () { },
    mounted () { }
}
</script>
<style lang="less" scoped>
    .notification {
        display: inline-flex;
        background-color: #303030;
        color: rgba(255, 255, 255, 1);
        align-items: center;
        padding: 10px;
        min-width: 280px;
        border-radius: 10px;
        box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
            0px 6px 10px 0px rgba(0, 0, 0, 0.14),
            0px 1px 18px 0px rgba(0, 0, 0, 0.12);
        flex-wrap: wrap;
        transition: all 0.3s;
        .content {
            padding: 0;
        }
        .btn {
            color: #ff4081;
            padding-left: 24px;
            margin-left: auto;
            cursor: pointer;
        }
    }
</style>